<template>
  <div class="searcHot">
    <section class="hotlist">
      <h3 class="title">热门搜索</h3>
      <ul class="list">
        <!-- 点击搜索热词,反向传值到搜索页,显示这个热搜词 -->
        <li class="item" v-for="item in TopSearch" :key="item.id">
          <a class="link" @click="$emit('first', item.first)">
            {{ item.first }}
          </a>
        </li>
      </ul>
    </section>
    <!-- 历史记录 -->
    <section class="historicalContent" v-if="this.theHistoricalRecord!=''">
      <div class="Top">
        <span>历史</span>
        <i class="iconfont icon-shanchu1" @click.stop="clear"></i>
      </div>
      <ul>
        <li v-for="(item, index) in theHistoricalRecord" :key="index">
          <i class="iconfont icon-icon-test"></i>
          <div class="cunt">
            <span @click="$emit('searcHistory',item)">{{ item }}</span>
            <div class="iconfont icon-shanchu" @click.stop="del(item)"></div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
import { toGetTopSearch } from "@/api/search ";
export default {
data() {
  return {
    TopSearch: [], //热门搜索列表
    theHistoricalRecord: [], //历史记录
  }
},
methods:{
  //获取热门搜索
  toGetTopSearchFun() {
    toGetTopSearch().then((data) => {
      if (data.code == 200) {
        this.TopSearch = data.result.hots;
      }
    });
  },
  // 获取输入历史记录
  gettheHistoricalRecord() {
    let theHistoricalRecord = localStorage.getItem("searchhistory");
    if (theHistoricalRecord) {
      this.theHistoricalRecord = JSON.parse(theHistoricalRecord);

    }
  },
  // 删除历史记录
  del(item) {
    console.log(item);
    let historywords = JSON.parse(localStorage.getItem("searchhistory"));
    historywords = historywords.filter(element => {
      return element != item
    });
    this.theHistoricalRecord = historywords
    localStorage.setItem("searchhistory", JSON.stringify(historywords));
  },
  // 清空历史记录
  clear() {
    let clearArr = localStorage.removeItem('searchhistory')
    if (!clearArr) {
      this.theHistoricalRecord = [];
    }
  },
},
created(){
  this.toGetTopSearchFun();
  this.gettheHistoricalRecord();
}
}
</script>

<style lang="scss" scoped>

.searcHot {
  position: relative;
  // z-index: -1;
  //热搜列表样式
  .hotlist {
    padding: 15px 10px 0;
    .title {
      font-size: 12px;
      line-height: 12px;
      color: #666;
    }

    .list {
      margin: 10px 0px 7px;

      .item {
        display: inline-block;
        height: 32px;
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 0 16px;
        line-height: 32px;
        box-sizing: border-box;
        position: relative;

        &::after {
          content: "";
          z-index: 2;
          border-radius: 32px;
          position: absolute;
          width: 100%;
          height: 200%;
          height: 32px;
          top: 0;
          left: 0;
          pointer-events: none;
          box-sizing: border-box;
          transform-origin: top left;
          border: 1px solid #d3d4da;
        }

        .link {
          font-size: 14px;
        }
      }
    }
  }

  //   历史记录样式
  .historicalContent {
    .Top {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 10px;
    }

    ul {
      li {
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        i {
          flex: 0 0 20px;
          margin-left: 10px;
        }

        .cunt {
          flex: 1;
          display: flex;
          height: 45px;
          line-height: 45px;
          font-size: 14px;
          margin-left: 3px;
          font-weight: lighter;
          justify-content: space-between;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);

          .icon-shanchu {
            flex: 0 0 30px;
          }
        }
      }
    }
  }
}
</style>